<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/index.js"></script>
    <style>
        .slider {
            background-color: #fff;
            width: 278px;
            height: 285px;
            z-index: 999;
            box-sizing: border-box;
            padding: 9px;
            border-radius: 6px;
            box-shadow: 0 0 11px 0 #999999;
        }

        .slider .content {
            width: 100%;
            height: 159px;
            position: relative;
        }

        .bg-img-div {
            width: 100%;
            height: 100%;
            position: absolute;
            transform: translate(0px, 0px);
        }

        .slider-img-div {
            height: 100%;
            position: absolute;
            transform: translate(0px, 0px);
        }

        .bg-img-div img {
            width: 100%;
        }

        .slider-img-div img {
            height: 100%;
        }

        .slider .slider-move {
            height: 60px;
            width: 100%;
            margin: 11px 0;
            position: relative;
        }

        .slider .bottom {
            height: 19px;
            width: 100%;
        }

        .refresh-btn, .close-btn, .slider-move-track, .slider-move-btn {
            background: url(https://static.geetest.com/static/ant/sprite.1.2.4.png) no-repeat;
        }

        .refresh-btn, .close-btn {
            display: inline-block;
        }

        .slider-move .slider-move-track {
            line-height: 38px;
            font-size: 14px;
            text-align: center;
            white-space: nowrap;
            color: #88949d;
            -moz-user-select: none;
            -webkit-user-select: none;
            user-select: none;
        }

        .slider {
            user-select: none;
        }

        .slider-move .slider-move-btn {
            transform: translate(0px, 0px);
            background-position: -5px 11.79625%;
            position: absolute;
            top: -12px;
            left: 0;
            width: 66px;
            height: 66px;
        }

        .slider-move-btn:hover, .close-btn:hover, .refresh-btn:hover {
            cursor: pointer
        }

        .bottom .close-btn {
            width: 20px;
            height: 20px;
            background-position: 0 44.86874%;
        }

        .bottom .refresh-btn {
            width: 20px;
            height: 20px;
            background-position: 0 81.38425%;
        }
    </style>
</head>

<body>
<div class="slider">
    <div class="content">
        <div class="bg-img-div">
            <img id="bg-img" src="" alt/>
        </div>
        <div class="slider-img-div" id="slider-img-div">
            <img id="slider-img" src="" alt/>
        </div>
    </div>
    <div class="slider-move">
        <div class="slider-move-track">
            拖动滑块完成拼图
        </div>
        <div class="slider-move-btn" id="slider-move-btn"></div>
    </div>
    <div class="bottom">
        <div class="close-btn" id="slider-close-btn"></div>
        <div class="refresh-btn" id="slider-refresh-btn"></div>
    </div>
</div>
<script>
    let currentCaptchaId = null;
    $(function () {
        clearAllPreventDefault($(".slider"));
        refreshCaptcha();
    })

    $("#slider-move-btn").mousedown(down);
    $("#slider-move-btn").on("touchstart", down);

    $("#slider-close-btn").click(() => {

    });

    $("#slider-refresh-btn").click(() => {
        refreshCaptcha();
    });

    function valid(captchaConfig) {

        let data = {
            bgImageWidth: captchaConfig.bgImageWidth,
            bgImageHeight: captchaConfig.bgImageHeight,
            templateImageWidth: captchaConfig.templateImageWidth,
            templateImageHeight: captchaConfig.templateImageHeight,
            startSlidingTime: captchaConfig.startTime,
            entSlidingTime: captchaConfig.stopTime,
            trackList: captchaConfig.trackArr
        };
        console.log("valid", captchaConfig, data);
        $.ajax({
            type:"POST",
            url:"/check?id=" + currentCaptchaId,
            contentType: "application/json", //必须这样写
            dataType:"json",
            data:JSON.stringify(data),//schoolList是你要提交是json字符串
            success:function (res) {
                console.log(res);
                if (res) {
                    alert("验证成功!!!");
                }
                refreshCaptcha();
            }

        })
    }

    function refreshCaptcha() {
        $.get("/gen", function (data) {
            reset();
            currentCaptchaId = data.id;
            const bgImg = $("#bg-img");
            const sliderImg = $("#slider-img");
            bgImg.attr("src", data.captcha.backgroundImage);
            sliderImg.attr("src", data.captcha.templateImage);
            initConfig(bgImg.width(), bgImg.height(), sliderImg.width(), sliderImg.height(), 206);
        })
    }

    function doDown() {
        $("#slider-move-btn").css("background-position", "-5px 31.0092%")
    }


    function doMove(currentCaptchaConfig) {
        const moveX = currentCaptchaConfig.moveX;
        $("#slider-move-btn").css("transform", "translate(" + moveX + "px, 0px)")
        $("#slider-img-div").css("transform", "translate(" + moveX + "px, 0px)")
    }
    function reset() {
        $("#slider-move-btn").css("background-position", "-5px 11.79625%")
        $("#slider-move-btn").css("transform", "translate(0px, 0px)")
        $("#slider-img-div").css("transform", "translate(0px, 0px)")
        currentCaptchaId = null;
    }
</script>
</body>
</html>
